<template>
	<view class="gen-root">
		<nav-bar class="navhead">{{pageTitle}}</nav-bar>
		<scroll-view class="scrollview" :style="{height:scrollHeight + 'px'}" :scroll-y="true">
			<entryColumn :title="mustTitle">
				<view slot="column-content">
					<input-lay v-for="(item,index) in mustUserColumn" :key="index" :layType="item.layType"
						:inputData="item" @onInputValueChange="onInputValueChange"></input-lay>
				</view>
			</entryColumn>

			<entryColumn :title="needTitle" v-if="needUserColumn.length > 0">
				<view slot="column-content">
					<input-lay v-for="(item,index) in needUserColumn" :key="index" :layType="item.layType"
						:inputData="item" @onInputValueChange="onInputValueChange"></input-lay>
				</view>
			</entryColumn>

			<view style="height: 200upx; margin: 0upx; background-color: #F5F5F5;" />

		</scroll-view>
		<view class="lay-btn">
			<button class="commit-btn" @click="nextStep" :disabled="!isBtnActive">提交</button>
		</view>
	</view>
</template>

<script>
	import genUserColumn from "@/common/gen_user_data.js"
	import indexData from "@/common/index_data.js"
	import entryColumn from "@/_components/entryColumn.vue"
	import inputLay from "@/_components/inputs/inputLay.vue"

	import {
		getColumns,
		createDataByEntity,
		createHisData
	} from "@/service/services.js"

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			entryColumn,
			inputLay
		},

		computed: {
			...mapState(['dictionary']),

			scrollH: function() {
				let sys = uni.getSystemInfoSync();
				let winWidth = sys.windowWidth;
				let winrate = 750 / winWidth;
				let winHeight = parseInt(sys.windowHeight * winrate)
				return winHeight
			}
		},

		data() {
			return {
				scrollHeight: 0,

				pageTitle: "pagetitle",
				pageEntity: '',

				mustTitle: "基本信息（必填）",
				mustUserColumn: [],

				needTitle: "其他信息",
				needUserColumn: [],

				isBtnActive: false,
				reciveInputData: []
			};
		},


		onLoad(option) {
			this.pageTitle = option.pageTitle;
			this.pageEntity = option.pageEntity;
		},

		onReady() {
			this.requireColumns(this.pageEntity);

			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					let pH = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					that.scrollHeight = pH
					let titleH = uni.createSelectorQuery().select(".navhead"); //想要获取高度的元素名（class/id）
					titleH.boundingClientRect(data => {
						that.scrollHeight = that.scrollHeight - data.bottom -
							5 //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
					}).exec()

				}
			})

		},

		methods: {
			getDictionaryList(e) {
				for (let i = 0; i < this.dictionary.length; i++) {
					let itemD = this.dictionary[i];
					console.log("itemD --- e")
					console.log(itemD.value)
					console.log(e)
					if (itemD.value == e) {
						return itemD;
					}
				}
				return null;
			},

			requireColumns(e) {
				uni.showLoading()
				getColumns({
					entity: e
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						let tempData = res.data;
						this.genMustAndNeedColumn(tempData);
					} else {
						uni.showToast({
							icon: "none",
							mask: true,
							title: res.msg,
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000);
					}
				})
			},

			genMustAndNeedColumn(inE) {
				inE.forEach(e => {
					if (e.require) {
						this.mustUserColumn.push(e);
					} else {
						this.needUserColumn.push(e)
					}

					if (e.qrKey.length != 0) {
						e.layType = "qrcode";
					} else if (e.selectionKey.length == 0 && e.columnType == "string") {
						e.layType = "input",
							e.layInputType = "text"
					} else if (e.selectionKey.length == 0 && e.columnType == "int") {
						e.layType = "input";
						e.layInputType = "number"
					} else if (e.selectionKey.length == 0 && e.columnType == "float") {
						e.layType = "input",
							e.layInputType = "number"
					} else if (e.selectionKey.length == 0 && e.columnType == "datetime") {
						e.layType = "date"
					} else if (e.selectionKey.length != 0) {
						e.layType = "selection";
						e.pickerArray = this.getDictionaryList(e.selectionKey);
					}
				})
			},

			/**
			 * 输入数据改变后的回调
			 * @param {Object} e
			 */
			onInputValueChange(e) {
				let finditem = null;
				finditem = this.reciveInputData.find(function(item) {
					if (item.key == e.key)
						return true;
				})

				if (finditem) {
					finditem.value = e.value;
				} else {
					this.reciveInputData.push(e);
				}

				this.isBtnActive = this.checkIsInputFinish()
			},

			/**
			 * 检查必填项
			 */
			checkIsInputFinish() {
				let isFinish = true;
				let _self = this;
				this.mustUserColumn.forEach(e => {
					let mustKey = e.name;
					let mustValueItem = _self.reciveInputData.find((item, index) => {
						return item.key == e.name
					})

					if (mustValueItem) {
						let mustValue = mustValueItem.value

						if (typeof(mustValue) == "undefined" || !mustValue || mustValue.length == 0) {
							isFinish = false;
						}
					} else {
						isFinish = false;
					}
				})

				return isFinish;
			},

			nextStep() {
				let cols = [];
				let _self = this;

				let tempParam = {
					entityName: this.pageEntity,
					cols: this.reciveInputData
				};

				uni.showLoading();
				let param = JSON.parse(JSON.stringify(tempParam))

				if (this.pageEntity == "Corrision") {
					createHisData(param).then(res => {
						uni.hideLoading();
						uni.showToast({
							mask: true,
							title: res.msg,
						})

						if (res.code == 0) {
							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
					})
				} else {
					createDataByEntity(param).then(res => {
						uni.hideLoading();
						uni.showToast({
							mask: true,
							title: res.msg,
						})

						if (res.code == 0) {
							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}

	.gen-root {
		background-color: #F5F5F5;
	}

	.commit-btn {
		width: 400upx;
		height: 100upx;
	}

	.lay-btn {
		position: absolute;

		width: 100%;
		bottom: 50upx;
	}

	.scrollview {
		background-color: #FFF;
	}
</style>
